import {useEffect, useRef, useState} from 'react';
import {
  Button,
  Input,
  Space,
  Table,
} from "antd";
import {CloudSyncOutlined, SearchOutlined} from '@ant-design/icons';
import _ from "lodash"
const excelSelectTable = (props: any) => {
  const {
    onRowClick,
    dataSource,
    multiple = false,
    tableSelectCallback,
  } = props;
  const [keys, setKeys] = useState<any[]>([]);
  let searchInput: any = null;

  const onRow = (record: any) => {
    return {
      onClick: async () => {
        if (!multiple) {
          onRowClick?.(record?.code, record?.name);
        } else {
          let newKeys: any[] = [];
          if (keys.includes(record?.code)) {
            newKeys = _.filter(keys, (k: any) => k !== record?.code);
          } else {
            newKeys = [...keys, record?.code];
          }
          setKeys(newKeys);
          tableSelectCallback?.(newKeys);
        }
      },
    };
  };

  const getColumnSearchProps = (dataIndex: any) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={(node) => {
            searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: "block" }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button
            onClick={() => handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered: any) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value: any, record: any) => {
      console.log(record[dataIndex]?.toString().toLowerCase());
      return record[dataIndex]
        ? record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase())
        : "";
    },
    onFilterDropdownVisibleChange: (visible: any) => {
      if (visible) {
        setTimeout(() => searchInput?.select(), 100);
      }
    },
    render: (text: any) => text,
  });

  const handleSearch = (selectedKeys: any, confirm: any, dataIndex: any) => {
    confirm?.();
  };

  const handleReset = (clearFilters: any) => {
    clearFilters?.();
  };

  const modalTableColumns = [
    {
      title: "编码",
      key: "code",
      dataIndex: "code",
      ...getColumnSearchProps("code"),
    },
    {
      title: "名称",
      key: "name",
      dataIndex: "name",
      ...getColumnSearchProps("name"),
    },
  ];

  const onSelectChange = (selectedRowKeys: any) => {
    setKeys(selectedRowKeys);
    tableSelectCallback?.(selectedRowKeys);
  };

  const rowSelection: any = {
    selectedRowKeys: keys,
    onChange: onSelectChange,
  };

  return (
    <Table
      size="small"
      rowKey={"code"}
      rowSelection={multiple ? rowSelection : false}
      onRow={onRow}
      columns={modalTableColumns}
      dataSource={dataSource}
    />
  );
};

export default excelSelectTable;
